<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>

	<link href="css/self/popupForm.css" type="text/css" rel="stylesheet"/>
	<link href="css/self/mTable.css" type="text/css" rel="stylesheet"/>
	<link href="css/self/serverList.css" type="text/css" rel="stylesheet"/>
</head>

<body>


	<div class="container-fluid">

		<div class="row bg-light	">
			<div class="col-lg-4 col-sm-12 breadcrumb bg-light">
				<li class="breadcrumb-item">基础服务功能</li>
				<li class="breadcrumb-item">服务集群管理</li>
			</div>
			<div class="col-lg-8 col-sm-12">
				<div class="form-inline mt-md-0 mr-2 pt-1 float-right" >
					<input id= "S_SERVICE_NAME" class="form-control mr-sm-2" type="text" placeholder="请输入服务名称" >
					<div class="input-group">
						<select class="custom-select" id="S_SERVICE_TYPE">
							<option selected value = "">服务类型（默认所有）</option>
							<option value ="DB">DB（数据库服务）</option>
							<option value ="MQ">MQ（消息服务）</option>
							<option value ="CACHE">CACHE（缓存服务）</option>
						</select>
						<div class="input-group-append">
							<button class="btn btn-outline-secondary" onclick="searchService();">搜索</button>
						</div>
					</div>
				</div>
				<div class="btn-group float-left my-sm-1 mr-5">
					<button class="btn btn-outline-primary" onclick="addService();">新增服务</button>
					<button class="btn btn-outline-danger" onclick="delService();">删除服务</button>
				</div>
			</div>
		</div>

		<div class="row-fluid" style="margin-top:10px">
			<table id="tidb_list">
			</table>
		</div>

	</div>

	<div class="modal fade" id="newService" tabindex="-1" role="dialog" aria-labelledby="newServiceHeader" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="newServiceHeader">新增服务集群 title</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>

				<div class="modal-body">
					<div class="tab-pane active in" id="home">
						<form id="newServiceForm" class="form-horizontal">
							<input type="hidden" value="" name="group_id" id="group_id"/>
							<div style="display:none">
								<input type="text" id="SERVICE_ID">
							</div>
							<div class="form-group row ">
								<label for="SERVICE_NAME" class="col-sm-3 control-label form-control-label">服务名</label>
								<div class="col-sm-9">
									<input type="email" class="form-control" id="SERVICE_NAME" placeholder="Email">
								</div>
							</div>
							<div class="form-group row">
								<label for="SERVICE_TYPE" class="col-sm-3 control-label form-control-label">服务类型</label>
								<div class="col-sm-9">
									<select class="custom-select" id="SERVICE_TYPE">
										<option value ="DB">DB</option>
										<option value ="MQ">MQ</option>
										<option value ="CACHE">CACHE</option>
									</select>
								</div>
							</div>
							<div class="form-group row">
								<label for="SERVICE_TYPE" class="col-sm-3 control-label form-control-label">是否生产环境:</label>
								<div class="col-sm-9">
									<select class="custom-select" id="IS_PRODUCT">
										<option value ="0">否</option>
										<option value ="1">是</option>
									</select>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
					<button type="button" onclick="saveService()" class="btn btn-primary ">提交</button>
				</div>
			</div>
		</div>

	</div>
</body>

<script src="js/self/popupForm.js" type="text/javascript" ></script>
<script src="js/self/mTable.js" type="text/javascript" ></script>
<script src="js/serviceList.js" type="text/javascript" ></script>
</html>
